<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备与数据页面</title>
  <style>
    /* 整体页面样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

    /* 导航栏样式 */
    nav {
      background-color: #333;
      padding: 10px;
      margin-bottom: 20px;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin-right: 15px;
      padding: 5px 10px;
      border-radius: 3px;
      transition: background-color 0.3s ease;
    }

    nav a:hover {
      background-color: #555;
    }

    /* 表单容器样式 */
   .form-container {
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* 分组标题样式 */
   .group-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }

    /* 使用Flexbox布局表单内容 */
   .form-container form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    /* 输入框和单选按钮样式 */
    label,
    input[type="text"],
    input[type="radio"] {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      transition: border-color 0.3s ease;
    }

    input[type="text"]:focus {
      border-color: #007BFF;
    }

    input[type="radio"] {
      margin-right: 10px;
    }

    /* 引入Font Awesome图标库 */
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

    /* 设备图标样式 */
   .icon {
      margin-right: 5px;
    }
  </style>
</head>

<body onload="init()">
  <!-- 导航栏 -->
  <nav>
    <a href="index.html">主页</a>
    <a href="stm32.html">stm32示例页面</a>
    <a href="modbus.html">modbus示例页面</a>
  </nav>

  <!-- 表单内容 -->
  <div class="form-container">
    <form>
      <!-- 环境数据分组 -->
      <div class="group-title">环境数据监测</div>
      <br />
      <label for="temp">温度</label>
      <input type="text" id="temp" value="" />
      <br />
      <label for="hum">湿度</label>
      <input type="text" id="hum" value="" />
      <br />
      <!-- 注释部分可按需处理，这里暂不显示相关输入框 -->
      <!-- <label for="ill">光照</label>
    <input type="text" id="ill" value="" />
    <br />
    <label for="a">二氧化碳浓度</label>
    <input type="text" id="a" value="" /> -->
      <br />
      <!-- 设备控制分组 -->
      <div class="group-title">设备控制</div>
      <br />
      <!-- 灯控制 -->
      <div>
        <i class="fas fa-lightbulb icon"></i>
        <label for="led">灯</label>
        <input type="radio" name="led" id="a" onclick="onled()" />开
        <input type="radio" name="led" id="b" checked="checked" onclick="offled()" />关
      </div>
      <br />
      <!-- 烟雾报警控制 -->
      <div>
        <i class="fas fa-smoke-signal icon"></i>
        <label for="beep">烟雾报警</label>
        <input type="radio" name="beep" id="c" onclick="onbeep()" />开
        <input type="radio" name="beep" id="d" checked="checked" onclick="offbeep()" />关
      </div>
      <br />
      <!-- 空调控制 -->
      <div>
        <i class="fas fa-air-conditioner icon"></i>
        <label for="fan">空调</label>
        <input type="radio" name="fan" id="e" onclick="onfan()" />开
        <input type="radio" name="fan" id="f" checked="checked" onclick="offfan()" />关
      </div>
    </form>
  </div>
</body>

</html>